<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>15-案例+知识点补充</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#box{width:1120px;height:500px;margin:0 auto;margin-top:50px;position:relative;overflow:hidden;}
			#box ul li{position:absolute;left:0;top:0;}
			#box li img{width:1120px;height:500px;}
			/*z-index层级实现*/
			#box ul li img{z-index:100;}
			/*css3选择器实现*/
			/* #box ul li{display:none;}
			#box ul li:nth-child(2){display:block;} */
			#box i{width:30px;height:50px;background:#333;color:#fff;text-align:center;line-height:50px;font-style:normal;font-size:40px;position:absolute;cursor:pointer;}
			#box .i-left{left:0;top:40%;}
			#box .i-right{right:0;top:40%;}
			/* #box ol li{list-style-type:decimal;} */
			#box ol{font-size:0;position:absolute;left:500px;bottom:10px;}
			#box ol li{width:20px;height:20px;font-size:12px;background-color:#ccc;text-align:center;line-height:20px;margin-left:3px;float:left;border-radius:50%;}
			#box ol li:hover{background-color:#f66;}
		</style>
	</head>
	<body>
		
		
		<div id="box">
			<ul>
				<li>
					<a href="###">
						<img src="../images/lb-6.jpg" alt="lb-6" title="lb-6"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-1.jpg" alt="lb-1" title="lb-1"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-2.jpg" alt="lb-2" title="lb-2"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-3.jpg" alt="lb-3" title="lb-3"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-4.jpg" alt="lb-4" title="lb-4"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-5.jpg" alt="lb-5" title="lb-5"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-6.jpg" alt="lb-6" title="lb-6"/>
					</a>
				</li>
				<li>
					<a href="###">
						<img src="../images/lb-1.jpg" alt="lb-1" title="lb-1"/>
					</a>
				</li>
			</ul>
			<i class="i-left">&lt;</i>
			<i class="i-right">&gt;</i>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ol>
		</div>
		
		
	</body>
</html>
